import React from 'react';
import { connect } from 'umi';
import { Form } from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import PageRouter from '@/components/PageRouter/PageRouter';
import SalaryConfigTipPage from '@/pages/SalaryManage/components/SalaryConfigTipPage';
import RejectTabWrapper from '@/pages/SalaryManage/SalaryCalculate/Recheck/components/RejectTabWrapper/index';

import OrganizationSelect from '@/components/OrganizationSelect';

const wrapSalaryPage = ({ type, slotWrapper, ...pageRouterProps }) => InnerComponent => ChildComponent => props => {
    const { tableDisplayLabel, labelWhichShowFlag } = props;

    const { RecheckMenuRight } = props
    return (
        <PageHeaderWrapper type="success">
            <PageRouter
                type={type}
                extraButton={pageRouterProps.rightButton ? <RecheckMenuRight {...props} /> : null}
                tabBarGutter={
                    tableDisplayLabel && (labelWhichShowFlag === 1 || labelWhichShowFlag === 3) ? 90 : undefined
                }
                {...pageRouterProps}
            >
                <InnerComponent slotWrapper={slotWrapper} organizationCode={props.shareOrganizationCode}>
                    <ChildComponent {...props} />
                </InnerComponent>
            </PageRouter>
        </PageHeaderWrapper>
    );
};

const SlotOrgWrapper = ({ shareOrganizationCode, dispatch, orgModel }) => {
    const handleOrgChange = val => {
        dispatch({
            type: `${orgModel}/sharedState`,
            payload: {
                shareOrganizationCode: val,
                sharePeriod: undefined
            }
        })
    }

    return (
        <Form layout="inline" style={{ position: 'absolute', top: 20, right: 0 }}>
            <Form.Item label="行政机构" style={{ marginRight: 0 }}>
                <OrganizationSelect
                    isStrictly
                    allowClear={false}
                    isNeedPermission
                    style={{ width: 210 }}
                    value={shareOrganizationCode}
                    onChange={handleOrgChange}
                    dropdownMatchSelectWidth
                    unLoading
                    />
            </Form.Item>
        </Form>
    )
}

const ReCheckSlotOrg = connect(({ recheckSharedModel }) => ({
    ...recheckSharedModel
}))(({ shareOrganizationCode, dispatch, orgModel }) => (
    <SlotOrgWrapper
        shareOrganizationCode={shareOrganizationCode}
        dispatch={dispatch}
        orgModel={orgModel} />))

const PayoffSlotOrg = connect(({ payoffSharedModel }) => ({
    ...payoffSharedModel
}))(({ shareOrganizationCode, dispatch, orgModel }) => (
    <SlotOrgWrapper
        shareOrganizationCode={shareOrganizationCode}
        dispatch={dispatch}
        orgModel={orgModel} />))

const wrapRecheck = wrapSalaryPage({
    type: 'salaryRecheck',
    rightButton: true,
    tabNameMapper: {
        hrRecheck: <RejectTabWrapper title="HR总览" tabType={1} />,
        financialRecheck: <RejectTabWrapper title="财务总览" tabType={2} />
    },
    slotWrapper: <ReCheckSlotOrg orgModel="recheckSharedModel" />
})(SalaryConfigTipPage);

const wrapRecheckDetail = wrapSalaryPage({
    type: 'salaryRecheckDetail',
    rightButton: true,
    tabNameMapper: {
        hrRecheckDetail: <RejectTabWrapper title="HR详细" tabType={1} />,
        financialRecheckDetail: <RejectTabWrapper title="财务详细" tabType={2} />
    },
    slotWrapper: <ReCheckSlotOrg orgModel="recheckSharedModel" />
})(SalaryConfigTipPage);

const wrapSalaryPayoff = wrapSalaryPage({
    type: 'salaryPayoff',
    rightButton: true,
    slotWrapper: <PayoffSlotOrg orgModel="payoffSharedModel" />
})(SalaryConfigTipPage);

const wrapWithSalaryConfigTip = ({ type, ...otherConfig }) =>
    wrapSalaryPage({ type, ...otherConfig })(SalaryConfigTipPage);

export { wrapSalaryPage, wrapRecheck, wrapRecheckDetail, wrapSalaryPayoff, wrapWithSalaryConfigTip };
